<template>
  <el-form ref="ruleForm"
           inline
           class="formSty"
           label-width="110px"
           :model="form"
           :rules="rules">
    <el-row>
      <el-form-item prop="contractNo"
                    label="合同编号">
        {{currentColumn.contractNo}}
      </el-form-item>
    </el-row>
    <el-form-item prop="driverName"
                  label="司机姓名">
      <el-input v-model.trim="form.driverName"
                maxlength="10"
                placeholder="请输入司机姓名" />
    </el-form-item>
    <el-form-item prop="idcard"
                  label="身份证号"
                  :rules="[
                {
                  required: true,
                  message: `请输入正确的身份证号`,
                  validator: validateIdcard,
                  trigger: 'change'
                }
              ]">
      <el-input v-model="form.idcard"
                maxlength="18"
                placeholder="请输入身份证号" />
    </el-form-item>
    <el-form-item prop="contactMobile"
                  label="联系电话">
      <el-input v-model="form.contactMobile"
                maxlength="13"
                placeholder="请输入联系电话" />
    </el-form-item>
    <el-form-item prop="plateNo"
                  label="车牌号"
                  :rules="[
                {
                  required: true,
                  message: `请输入正确的车牌号`,
                  validator: validatePlateNo,
                  trigger: 'change'
                }
              ]">
      <el-input v-model="form.plateNo"
                maxlength="10"
                placeholder="请输入车牌号" />
    </el-form-item>
    <el-form-item prop="vehicleLoad"
                  label="载重"
                  :rules="[
                {
                  required: true,
                  message: `只能输入3位整数，2位小数`,
                  validator: validateVehicleLoad,
                  trigger: 'change'
                }
              ]">
      <div class="flex-center">
        <el-input v-model="form.vehicleLoad"
                  maxlength="10"
                  placeholder="请输入载重" /> <span class="ml8">吨</span>
      </div>
    </el-form-item>
    <el-form-item prop="arrivalTime"
                  label="进场时间">
      <el-date-picker v-model="form.arrivalTime"
                      align="left"
                      type="datetime"
                      placeholder="请选择进场时间"
                      style="width: 100%"
                      format="yyyy-MM-dd HH:mm:ss"
                      :default-time="'00:00:00'" />
    </el-form-item>
    <el-button class="btnSty"
               type="primary"
               :loading="loading"
               @click="handleSubmit">提交</el-button>
  </el-form>
</template>

<script>
import { transport } from "@/api/index.js";
import _ from "lodash";
export default {
  name: 'PickCoenantDrawer',
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      loading: false,
      form: {
        driverName: null,
        idcard: null,
        contactMobile: null,
        plateNo: null,
        vehicleLoad: null,
        arrivalTime: null
      },
      rules: {
        driverName: [
          { required: true, message: `司机姓名不能为空`, trigger: "blur" }],
        // { pattern: `^([^\s])/g$`, message: "司机姓名不能包含空格", trigger: ["change", "blur"] }],
        contactMobile: [
          { required: true, message: `联系电话不能为空`, trigger: "blur" },
          { pattern: `^[1][3,4,5,6,7,8,9][0-9]{9,11}$`, message: "手机号或电话必须是11到13位数字", trigger: ["change", "blur"] },
          { min: 11, max: 13, message: "手机号或电话必须是11到13位数字", trigger: ["change", "blur"] }
        ],
      }
    };
  },
  computed: {
    currentColumn () {
      return this.value
    },
  },
  created () {
    console.log('currentColumn-----', this.currentColumn)
    if (this.currentColumn?.pickCovenant) {
      this.form = {
        ...this.currentColumn.pickCovenant
      }
    }
  },
  methods: {
    // 身份证号
    validateIdcard (rule, value, callback) {
      let regStr = /^[1-8]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])\d{3}[\dX]$/;
      if (value && regStr.test(value)) {
        callback();
      } else {
        callback(new Error(`请输入正确的身份证号`));
      }
    },
    // 车牌号
    validatePlateNo (rule, value, callback) {
      let regStr = /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/;

      if (value && regStr.test(value)) {
        callback();
      } else {
        callback(new Error(`请输入正确的车牌号`));
      }
    },
    validateVehicleLoad (rule, value, callback) {
      let regStr = /^(-)?\d{0,3}(\.\d{0,2})?$/g;
      if (value && regStr.test(value)) {
        callback();
      } else {
        callback(new Error(`只能输入3位整数，2位小数`));
      }
    },
    // 触发事件
    handleSubmit: _.debounce(function () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submit();
          this.loading = true;
        }
      });
    }, 600),
    async submit () {
      let response = await transport.submitPickCovenant({ ...this.form, waybillId: this.currentColumn?.waybillId })
        .catch(() => {
          this.loading = false;
        })
      let { message } = response
      this.loading = false;
      this.$message.success(message)
      this.$emit("confirm");
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-input {
  width: 360px !important;
}
.formSty {
  padding: 20px;
}
.btnSty {
  display: block;
  margin: 15px 0;
  margin-left: 110px;
}
.flex-center {
  display: flex;
  justify-content: flex-start;
}
.ml8 {
  margin-left: 8px;
}
</style>